// import { useNavigate } from 'react-router-dom';
// import React, { useState } from 'react';
// import { Form, Input, Button, message } from 'antd';
// import axios from 'axios';
// import '../../css/clubs/createClubs.css';

// interface CreateClubFormValues {
//   name: string;
//   description: string;
//   president: string;
// }

// const CreateClub = () => {
//   const [loading, setLoading] = useState(false);
//     const navigate = useNavigate();

//   const handleSubmit = async (values: CreateClubFormValues) => {
    
//     setLoading(true);
//     try {
//       const response = await axios.post('http://localhost:5000/api/createClub', {
//         name: values.name,
//         description: values.description,
//         president: values.president,
//       });

//       if (response.data.success) {
//         message.success('社团创建成功，即将跳转到社团列表...');
//         // setTimeout(() => {
//           navigate('/allClubs'); // 2秒后跳转到社团列表
//         // }, 2000);
//       } else {
//         message.error('社团创建失败: ' + response.data.message);
//       }
//     } catch (error) {
//       console.error('创建社团失败:', error);
//       message.error('服务器错误，请稍后再试');
//     } finally {
//       setLoading(false);
//     }
//   };

//   return (
//     <div className="create-club-page">
//       <div className="create-club-container">
//         <h2 className="create-club-title">创建社团</h2>
//         <Form
//           className="create-club-form"
//           onFinish={handleSubmit}
//           labelCol={{ span: 6 }}
//           wrapperCol={{ span: 18 }}
//           initialValues={{ description: '' }}
//         >
//           <Form.Item
//             label="社团名称"
//             name="name"
//             rules={[{ required: true, message: '请输入社团名称' }]}
//           >
//             <Input className="club-input" placeholder="请输入社团名称" />
//           </Form.Item>

//           <Form.Item
//             label="社团描述"
//             name="description"
//             rules={[{ required: false }]}
//           >
//             <Input.TextArea className="club-textarea" rows={4} placeholder="请输入社团描述" />
//           </Form.Item>

//           <Form.Item
//             label="社团负责人"
//             name="president"
//             rules={[{ required: true, message: '请输入社团负责人姓名' }]}
//           >
//             <Input className="club-input" placeholder="请输入社团负责人姓名" />
//           </Form.Item>

//           <Form.Item wrapperCol={{ span: 24 }}>
//             <Button 
//               className="submit-button" 
//               type="primary" 
//               htmlType="submit" 
//               block 
//               loading={loading}
//             >
//               创建社团团
//             </Button>
//           </Form.Item>
//         </Form>
//       </div>
//     </div>
//   );
// };

//  export default CreateClub;

import { useNavigate } from 'react-router-dom';
import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import axios from 'axios';
import '../../css/clubs/createClubs.css';

interface CreateClubFormValues {
  name: string;
  description: string;
  type: string;  // 社团类型
  president: string;
}

const CreateClub = () => {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const handleSubmit = async (values: CreateClubFormValues) => {
    setLoading(true);
    try {
      const response = await axios.post('http://localhost:5000/api/createClub', {
        name: values.name,
        description: values.description,
        type: values.type,
        president: values.president,
      });

      if (response.data.success) {
        message.success('社团创建成功，即将跳转到社团列表...');
        navigate('/allClubs');
      } else {
        message.error('社团创建失败: ' + response.data.message);
      }
    } catch (error) {
      console.error('创建社团失败:', error);
      message.error('服务器错误，请稍后再试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="create-club-page">
      <div className="create-club-container">
        <h2 className="create-club-title">创建社团</h2>
        <Form
          className="create-club-form"
          onFinish={handleSubmit}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          initialValues={{ description: '', type: '' }}
        >
          <Form.Item
            label="社团名称"
            name="name"
            rules={[{ required: true, message: '请输入社团名称' }]}
          >
            <Input className="club-input" placeholder="请输入社团名称" />
          </Form.Item>

          <Form.Item
            label="社团类型"
            name="type"
            rules={[{ required: true, message: '请输入社团类型' }]}
          >
            <Input className="club-input" placeholder="请输入社团类型（如：篮球、书法）" />
          </Form.Item>

          <Form.Item
            label="社团描述"
            name="description"
            rules={[{ required: false }]}
          >
            <Input.TextArea className="club-textarea" rows={4} placeholder="请输入社团描述" />
          </Form.Item>

          <Form.Item
            label="社团负责人"
            name="president"
            rules={[{ required: true, message: '请输入社团负责人姓名' }]}
          >
            <Input className="club-input" placeholder="请输入社团负责人姓名" />
          </Form.Item>

          <Form.Item wrapperCol={{ span: 24 }}>
            <Button 
              className="submit-button" 
              type="primary" 
              htmlType="submit" 
              block 
              loading={loading}
            >
              创建社团
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default CreateClub;